
<template>
  <div>
    <div class="introduct-content1"
      style="padding-bottom:8px;">
      <p class="content-tittle"
        style="margin-bottom:20px;">
        <i18n :path="isNewVersion?guide.wantDesk:guide.wantPartition" :tag="false">
          <span place="theme" style="color:#FF2B2B;">{{isNewVersion ? $t('guide.desk') : $t('guide.partition')}}</span>
        </i18n>
        <el-popover class="content-tittle-right"
          popper-class="colour-skin"
          placement="bottom-end"
          width="380"
          trigger="hover">
          <i18n :path="isNewVersion?guide.dressBeauty:guide.dressSkin" :tag="false">
            <p place="center" class="more-skin-pop_title">{{isNewVersion ? $t('guide.beautiful') : $t('guide.skin')}}</p>
          </i18n>
          <img class="more-skin-pop_img"
            src="@/assets/introduct/more-theme.png"
            alt="">
          <span slot="reference">{{ $t('guide.more') }}</span>
        </el-popover>
      </p>
      <div class="skin-carousel" v-if="skinLoading" style="height:156px;justify-content: center;font-size: 20px;">
        <i class="el-icon-loading"></i>
      </div>
      <div class="skin-carousel" v-else-if="!skinPages.length" style="height:156px;justify-content: center;color: #999999;">
        {{ $t('guide.nonData') }}
      </div>
      <div class="skin-carousel" v-else>
        <el-button icon="el-icon-arrow-left"
          type="info"
          circle
          :disabled="skinCurrPage<1"
          @click="setSkinCurrPage(-1)" />
        <div class="skin-carousel_main" @wheel="onSkinWheel">
          <div class="skin-carousel_scroll"
            :style="{transform:' translateX(-'+(skinCurrPage*100)+'%)'}">
            <div class="skin-carousel_item"
              v-for="(list,i) in skinPages"
              :key="i">
              <el-row :gutter="20"
                class="skin-row"
                type="flex">
                <el-col :span="8"
                  v-for="(it,i) in list"
                  :key="i">
                  <div class="img-checkbox"
                    :class="{active:skinInfo===it}"
                    v-loading="it.seting"
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0, 0, 0, 0.2)"
                    @click="onSetSkin(it)">
                    <imageBox :src="it.Thumb" fit="contain"/>
                    <i class="el-icon-check"></i>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
        <el-button icon="el-icon-arrow-right"
          type="info"
          circle
          :disabled="skinCurrPage>=(skinPages.length-1)"
          @click="setSkinCurrPage(1)"></el-button>
      </div>
      <div class="text-right mt15">
        <el-checkbox v-model="noSkin"
          @change="onSetNoSkin">{{ $t('guide.exit') }}</el-checkbox>
      </div>
    </div>
  </div>
</template>
<script>
import { getSkinList_version, getSkinList } from '@/api/skin'
import { mapGetters } from 'vuex'
import imageBox from '@/components/image-box'
import { debounce } from '@/utils'
import { isPassVersion } from '@/utils/judge'
import { minVersionMenu } from '@/utils/costum'
import i18n from '@/lang'
export default {
  components: {
    imageBox
  },
  props: {
    isNewInstall: Boolean,
    value: Boolean
  },
  data () {
    return {
      stateOps: [{
        icon: require('@/assets/introduct/collapse-2.png'),
        name: this.$t('guide.fold') + this.$('guide.mini'),
        value: 2 // 1小 2中 3大，默认中
      }, {
        icon: require('@/assets/introduct/collapse-1.png'),
        name: this.$t('guide.fold') + this.$('guide.title'),
        value: 0
      }],
      collapseIcon: null,
      skinInfo: null,
      noSkin: false,
      skinCurrPage: 0,
      skinPages: [],
      skinLoading: false,
      skinSettingStates: [],
      loadSettin: false // 点击状态
    }
  },
  computed: {
    ...mapGetters(['appInfo']),
    statIds () {
      // [0勾选不想要主题装扮,1取消勾选不想要主题装扮,2勾选标题栏,3勾选小图标,4点击左箭头,5点击右箭头]
      return this.isNewInstall ? [2552, 2553, 2554, 2555, 2556, 2557] : [2612, 2613, 2614, 2615, 2616, 2617]
    },
    needVip () {
      return this.$store.getters.appInfo.appID !== 110
    },
    isNewVersion () {
      return isPassVersion(minVersionMenu)
    }
  },
  watch: {
    'skinSettingStates.length' (val) {
      this.$emit('input', !val)
    }
  },
  mounted () {
    if (this.isNewVersion) {
      this.getSkins_new()
    } else {
      this.getSkins()
    }
    // this.$xzAsy('xz_get_collapse_icon_or_title').then(val => {
    //   if (val === 0) {
    //     this.collapseIcon = 0
    //   } else if ([1, 2, 3].includes(val)) {
    //     this.collapseIcon = 2
    //   }
    //   // if (!isNaN(val)) this.collapseIcon = val
    // })
    this.onSkinWheel = debounce((e) => {
      this.setSkinCurrPage(e.deltaY > 0 ? 1 : -1)
    }, 200, true)
  },
  methods: {
    getSkins_new () {
      this.skinLoading = true
      getSkinList_version({
        pageIndex: 1,
        pageSize: 45
      }).then(res => {
        const data = (res.data && res.data.SubNode) || []
        const list = []
        data.filter((it, i) => {
          if (!(i % 6)) {
            list.push([])
          }
          list[list.length - 1].push(it)
        })
        this.skinPages = list
        data[0] && this.onSetSkin(data[0])
      }).finally(() => {
        this.skinLoading = false
      })
    },
    // eslint-disable-next-line sonarjs/no-identical-functions
    getSkins () {
      this.skinLoading = true
      getSkinList({
        pageIndex: 1,
        pageSize: 45,
        attribute: 6,
        a: this.appInfo.appID,
        p: this.appInfo.pubkey,
        v: this.appInfo.version,
        u: this.appInfo.uuid
      // eslint-disable-next-line sonarjs/no-identical-functions
      }).then(res => {
        const data = (res.data && res.data.SubNode) || []
        const list = []
        // eslint-disable-next-line sonarjs/no-identical-functions
        data.filter((it, i) => {
          if (!(i % 6)) {
            list.push([])
          }
          list[list.length - 1].push(it)
        })
        this.skinPages = list
        data[0] && this.onSetSkin(data[0])
      }).finally(() => {
        this.skinLoading = false
      })
    },
    setSkinCurrPage (n) {
      const cn = this.skinCurrPage + n
      if (cn < 0 || cn >= this.skinPages.length) return
      this.skinCurrPage = cn
      const statId = this.statIds[n < 0 ? 4 : 5]
      this.$xz('xz_substat_action', statId)
    },
    onSetCollapseIcon (val) {
      if (this.collapseIcon === val) {
        val = -1
      } else {
        const statId = this.statIds[val === 0 ? 2 : 3]
        this.$xz('xz_substat_action', statId)
      }
      this.collapseIcon = val
      this.$xz('xz_set_collapse_icon_or_title', val)
    },
    // eslint-disable-next-line sonarjs/cognitive-complexity
    onSetSkin (item) {
      if (this.skinInfo === item) return
      if (this.loadSettin) return
      this.loadSettin = true
      this.$set(item, 'seting', true)
      let obj = {}
      let skinValue = 'xz_set_skin_preview_async'
      if (this.isNewVersion) {
        skinValue = 'xz_set_desk_skin_preview_async'
        obj = {
          area_skins: [],
          desk_subject_id: item.ID,
          wallpaper_id: 0,
          id: item.ID
        }
        if (item.sub_resources && item.sub_resources.length !== 0) {
          const listRes = item.sub_resources
          listRes.forEach(ele => {
            if (ele.resource_type === 'wallpaper') {
              obj.wallpaper_id = ele.ID
            } else {
              const objItem = {
                id: ele.ID,
                pay: this.needVip && ele.attribute === 6,
                skin_ids: {}
              }
              if (ele.BkColor) {
                objItem.BkColor = ele.BkColor
              }
              ['BK', 'GJ', 'BJ', 'XTB'].forEach((key, index) => {
                if (ele[key].id) {
                  objItem.skin_ids[index] = {
                    id: ele[key].id,
                    pay: this.needVip && ele[key].attribute === 6
                  }
                }
              })
              obj.area_skins.push(objItem)
            }
          })
        }
      } else {
        this.skinInfo = item
        obj = {
          subject_id: item.ID,
          pay: item.Attribute === 6,
          skin_ids: {}
        };
        ['BK', 'GJ', 'BJ', 'XTB'].forEach((key, index) => {
          if (item[key].id) {
            obj.skin_ids[index] = {
              id: item[key].id,
              pay: item[key].attribute === 6
            }
          }
        })
        if (item.BkColor) obj.bkcolor = item.BkColor
      }
      // xz_set_skin_preview_async
      this.skinSettingStates.push(1)
      this.$xzAsy(skinValue, obj).then(state => {
        this.$delete(item, 'seting')
        if (state !== 0) {
          let msg = ''
          switch (state) {
            case 2:
              msg = this.$t('guide.version')
              break
            case 3:
              msg = this.$t('guide.parseError')
              break
            case 4:
              msg = this.$t('guide.resources')
              break
            default:
              msg = this.$t('guide.unknown')
          }
          this.$PsMessage({ message: msg })
        } else {
          this.skinInfo = item
        }
        this.skinSettingStates.pop()
        this.loadSettin = false
      })
      this.noSkin = false
    },
    onSetNoSkin (val) {
      if (this.skinSettingStates.length) {
        this.$nextTick(() => {
          this.noSkin = !val
        })
        return this.$PsMessage({ message: i18n.t('code.setting') })
      }
      if (val) {
        this.$xz('xz_cancel_skin_preview')
        this.skinInfo = null
      }
      const statId = this.statIds[val ? 0 : 1]
      this.$xz('xz_substat_action', statId)
    },
    onSkinWheel (e) {}
  }
}
</script>
<style lang="scss" scoped>
.introduct-content1{
  padding: 10px;
  background-color: #fff;
}
.skin-row{
  flex-wrap: wrap;
  margin-top: -20px;
}
.img-checkbox{
  margin-top: 20px;
  background-color: #f4f4f4;
}
.state {
  &-list {
    display: flex;
  }
  &-item {
    + .state-item {
      margin-left: 9px;
    }
    &_title {
      text-align: center;
      font-size: 12px;
      margin-top: 6px;
      span {
        color: #00bbd7;
        margin-left: 10px;
      }
    }
    .img-checkbox img {
      width: 200px;
    }
  }
}
.skin-carousel {
  display: flex;
  align-items: center;
  &_main {
    flex: 1;
    overflow: hidden;
    margin: 0 2px;
  }
  &_scroll {
    display: flex;
    transition: transform 0.35s ease;
  }
  &_item {
    flex: 0 0 100%;
    display: flex;
    padding: 4px 10px;
    /deep/ .el-loading-mask{
      border-radius: 7px;
      transition: none;
      .el-loading-spinner{
        margin-top: -13px;
        i{
          color: #fff;
          font-size: 24px;
        }
      }
    }
    /deep/ .ps-el-image{
      .el-image__error,.el-image__placeholder{
        background: #efefef;
      }
    }
  }
  .img-checkbox {
    img {
      width: 100%;
      border-radius: 4px;
    }
  }
  .el-button.is-circle {
    width: 28px;
    height: 28px;
    line-height: 28px;
    padding: 0;
    font-size: 18px;
    &:not(.is-disabled) {
      background: rgba(0, 0, 0, 0.3);
      border-color: transparent;
      &:hover {
        background: rgba(0, 0, 0, 0.5);
      }
    }
  }
}
.more-skin-pop_title {
  font-size: 18px;
  font-weight: bold;
  color: #333333;
  margin-top: 14px;
}
.more-skin-pop_img {
  width: 320px;
  height: 126px;
  margin: 14px auto 16px;
  display: block;
}
</style>
